<template>
<!--  联系人详情  -->
<div>

<!--  <el-page-header @back="goBack" title="行政" content="联系人详情" ></el-page-header>-->

  <el-button size="medium" type="primary" plain @click="goBack" >返回</el-button>

  <!--  分割线  -->
  <el-divider class="head"></el-divider>

  <div class="div-main">
  <el-row>
    <el-col :span="1.5">
      <div>
        <el-divider class="heads"  direction="vertical"></el-divider>
        <b>基本资料:</b>  </div>
    </el-col>
  </el-row>
<div style="height: 18px"></div>
<!--  基本资料 表格渲染   -->
  <div class="tableDiv" :model="AdmContactsByidData">
    <el-row>
      <el-col :span="8">
        <div class="grid-content">
          <div>
            <span>单位名称:</span><br/>
            {{ AdmContactsByidData.unitname }}
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <div>
            <span>联系人:</span><br/>{{ AdmContactsByidData.contactName }}
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <div><span>电话:</span><br/>{{ AdmContactsByidData.contactPhone }}</div>
        </div>
      </el-col>
    </el-row>
  </div>

<!--   详细资料     -->

    <div style="height: 40px"></div>

    <el-row>
      <el-col :span="1.5">
        <div>
          <el-divider class="heads"  direction="vertical"></el-divider>
          <b>详细资料:</b>  </div>
      </el-col>
    </el-row>
    <div style="height: 18px"></div>
    <!--  详细资料 表格渲染   -->
    <div class="tableDiv" :model="AdmContactsByidData">
      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>部门:</span><br/>
              {{ AdmContactsByidData.contactDept }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>职位:</span><br/>{{ AdmContactsByidData.contactPost }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div><span>固定电话:</span><br/>{{ AdmContactsByidData.contactTel }}</div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>邮箱:</span><br/>
              {{ AdmContactsByidData.contactEmail }}
            </div>
          </div>
        </el-col>

<el-col :span="16">
  <div class="grid-content">
    <div>
      <span></span><br/>

    </div>
  </div>

</el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            <div>
              <span>详细地址:</span><br/>
              {{ AdmContactsByidData.contactAddress }}
            </div>
          </div>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            <div>
              <span>备注:</span><br/>
              {{ AdmContactsByidData.remark }}
            </div>
          </div>
        </el-col>

      </el-row>

    </div>

  </div>

</div>
</template>

<script>
export default {
  name: "QueryAdmContacts",
  data(){
    return{
      id:this.$route.params.id,
      AdmContactsByidData:{}
    }
  },
created() {
this.QueryAdmContactsById()
},
  methods:{
    goBack(){this.$router.go(-1);}, //返回上一个页面
    QueryAdmContactsById(){

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get(`admContacts/${this.id}`)
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.AdmContactsByidData=res.data.data
      })
      .catch()
    }

  }
}
</script>

<style scoped>

.head{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}

.heads{
  width: 3px;
  background-color: #409EFF;
  height: 19px;
}

.grid-content {
  min-height: 80px;
  border: 1px solid gainsboro;
}

.grid-content > div {
  margin: 15px 0 0 10px;

}

.grid-content > div > span {
  color: #767676;

}

.div-main{
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}

/*.tableDiv{*/
/*  width: 60%;*/
/*  margin : 10px 0px 15px 5px;*/
/*}*/

</style>